// 顶部导航组件

import React from 'react'
import styles from './index.module.scss'
import Icon from '@/components/Icon'
import { useHistory } from 'react-router'
import classNames from 'classnames'
// import { withRouter } from 'react-router-dom'

export default function NavBar({ children, extra, onLeftClick, className }) {
  const history = useHistory()

  // 如果左边箭头不传点击事件默认返回上一页
  const back = () => {
    if (onLeftClick) {
      onLeftClick()
    } else {
      history.go(-1)
    }
  }

  return (
    <div>
      {/* 顶部工具栏 */}
      <div className={classNames(styles.root, className)}>
        {/* 后退按钮 */}
        <div className="left">
          <Icon type="iconfanhui" onClick={back} />
        </div>
        {/* 居中标题 */}
        <div className="title">{children}</div>

        {/* 右侧内容 */}
        <div className="right">{extra}</div>
      </div>
    </div>
  )
}
// export default withRouter(NavBar)
